<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>网络留言本</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="${ctx}/bootstrap/css/bootstrap.min.css">   
    <style>
    	.table th, .table td {
		text-align: center;
		vertical-align: middle!important;
		}
    </style>
  </head>
  <body>
  	<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">网络留言本</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
	        <li class="active"><a href="#">留言管理 <span class="sr-only">(current)</span></a></li>	        
	        <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">系统管理<span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">角色管理</a></li>
	            <li role="separator" class="divider"></li>
	            <li><a href="#">用户管理</a></li>
	          </ul>
	        </li>
	      </ul>
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="账号" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="密码" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">登录</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
	        <li><a href="#">注销 <span class="sr-only">(current)</span></a></li>
	      </ul>
        </div>
      </div>
    </nav>
    <div class="container" style="margin-top:50px;">
    	<div class="row">
    		<h1>角色管理</h1>	
    		<div style="margin:10px auto;">
    			<button type="button" class="btn btn-success">新增</button>		
    			<button type="button" class="btn btn-primary">授权</button>
    		</div>		
    		<table class="table table-hover table-bordered">
				<tr>					
					<th><input type="checkbox"></th>
					<th>角色编号</th>
					<th>角色名称</th>
					<th>角色描述</th>
					<th>操作</th>
				</tr>
				<tr>					
					<td><input type="checkbox"></td>
					<td>1</td>
					<td>admin</td>
					<td>管理员</td>
					<td>
						<a class="btn btn-danger btn-sm" href="#">删除</a>
						<a class="btn btn-info btn-sm" href="#" >编辑</a>
					</td>
				</tr>
				
			</table>
    	</div>    	
    </div>
    
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="${ctx}/bootstrap/js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${ctx}/boostrap/js/bootstrap.min.js"></script>
  </body>
</html>
